extends simplelayout
doctype html
block content

    html(lang='zh-CN')
        head
            meta(charset='utf-8')
            link(rel='icon', href='https://static.jianshukeji.com/highcharts/images/favicon.ico')
            meta(name="viewport" content="width=device-width, initial-scale=1")

    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/bootstrap-glyphicons.css')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/styles.css')
    script(src='/javascripts/jquery-1.11.0.min.js')

    script(src='/javascripts/highcharts.js')
    script(src='/javascripts/highcharts-more.js')
    script(src='/javascripts/xrange.js')
    script(src='/javascripts/exporting.js')
    script(src='/javascripts/series-label.js')

    link(rel='shortcut icon', href='http://static.tmimgcdn.com/img/favicon.ico')
    link(rel='icon', href='http://static.tmimgcdn.com/img/favicon.ico')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/bootstrap-glyphicons.css')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/styles.css')

    div(style="width: 1000px; margin: 50px 200px;")
        ul(id="position")

    body
        div(style='height:800px;min-width: 300px;max-width: 1500px;margin: 1em auto;', id="timechart3")

    script(type='text/javascript').
        function search_graph_surgeryvital(Term30, Term31) {
            $.ajax({
                url: "/search/graph_surgeryvital/list",
                type: "POST",
                data: {
                    term: Term30,
                    term1: Term31
                },
                success: function (data) {
                    var sign_time = [];
                    var sign_arr = [];
                    var sign_arr1 = [];
                    var sign_arr2 = [];
                    var sign_arr3 = [];
                    var sign_arr4 = [];
                    var sign_arr5 = [];
                    var sign_arr6 = [];
                    var sign_arr7 = [];
                    var k10 = 0;
                    var k20 = 0;
                    var k30 = 0;
                    var k40 = 0;
                    var k50 = 0;
                    var k60 = 0;
                    var k70 = 0;
                    if (data == '') {
                        alert("No or lack of relevant data!" + "\n" + "Click to close the message box.");
                    } else {
                        //////////// SURGERY VITAL SIGN DATA ////////////
                        sign_arr[0] = data[0];
                        sign_time[0] = sign_arr[0].MONITOR_TIME;
                        var s = 1;
                        for (var p = 1; p < data.length; p++) {
                            if (data[p].MONITOR_TIME != data[p - 1].MONITOR_TIME) {
                                sign_arr[s] = data[p];
                                sign_time[s] = sign_arr[s].MONITOR_TIME;
                                s++;
                            }
                        }
                        for (var ks = 0; ks < s; ks++) {
                            if (sign_arr[ks].HeartRate != null) {
                                sign_arr1[k10] = {
                                    x: Date.UTC(chGMT(sign_time[ks]).slice(0, 4), chGMT(sign_time[ks]).slice(5, 7) - 1, chGMT(sign_time[ks]).slice(8, 10), chGMT(sign_time[ks]).slice(11, 13), chGMT(sign_time[ks]).slice(14, 16), chGMT(sign_time[ks]).slice(17, 19)),
                                    y: Number(sign_arr[ks].HeartRate)
                                }
                                k10++;
                            }
                            if (sign_arr[ks].Pulse != null) {
                                sign_arr2[k20] = {
                                    x: Date.UTC(chGMT(sign_time[ks]).slice(0, 4), chGMT(sign_time[ks]).slice(5, 7) - 1, chGMT(sign_time[ks]).slice(8, 10), chGMT(sign_time[ks]).slice(11, 13), chGMT(sign_time[ks]).slice(14, 16), chGMT(sign_time[ks]).slice(17, 19)),
                                    y: Number(sign_arr[ks].Pulse)
                                }
                                k20++;
                            }
                            if (sign_arr[ks].SystolicPressure != null) {
                                sign_arr3[k30] = {
                                    x: Date.UTC(chGMT(sign_time[ks]).slice(0, 4), chGMT(sign_time[ks]).slice(5, 7) - 1, chGMT(sign_time[ks]).slice(8, 10), chGMT(sign_time[ks]).slice(11, 13), chGMT(sign_time[ks]).slice(14, 16), chGMT(sign_time[ks]).slice(17, 19)),
                                    y: Number(sign_arr[ks].SystolicPressure)
                                }
                                k30++;
                            }
                            if (sign_arr[ks].DiastolicPressure != null) {
                                sign_arr4[k40] = {
                                    x: Date.UTC(chGMT(sign_time[ks]).slice(0, 4), chGMT(sign_time[ks]).slice(5, 7) - 1, chGMT(sign_time[ks]).slice(8, 10), chGMT(sign_time[ks]).slice(11, 13), chGMT(sign_time[ks]).slice(14, 16), chGMT(sign_time[ks]).slice(17, 19)),
                                    y: Number(sign_arr[ks].DiastolicPressure)
                                }
                                k40++;
                            }
                            if (sign_arr[ks].CentralVenousPressure != null) {
                                sign_arr5[k50] = {
                                    x: Date.UTC(chGMT(sign_time[ks]).slice(0, 4), chGMT(sign_time[ks]).slice(5, 7) - 1, chGMT(sign_time[ks]).slice(8, 10), chGMT(sign_time[ks]).slice(11, 13), chGMT(sign_time[ks]).slice(14, 16), chGMT(sign_time[ks]).slice(17, 19)),
                                    y: Number(sign_arr[ks].CentralVenousPressure)
                                }
                                k50++;
                            }
                            if (sign_arr[ks].RespiratoryRate != null) {
                                sign_arr6[k60] = {
                                    x: Date.UTC(chGMT(sign_time[ks]).slice(0, 4), chGMT(sign_time[ks]).slice(5, 7) - 1, chGMT(sign_time[ks]).slice(8, 10), chGMT(sign_time[ks]).slice(11, 13), chGMT(sign_time[ks]).slice(14, 16), chGMT(sign_time[ks]).slice(17, 19)),
                                    y: Number(sign_arr[ks].RespiratoryRate)
                                }
                                k60++;
                            }
                            if (sign_arr[ks].O2Saturation != null) {
                                sign_arr7[k70] = {
                                    x: Date.UTC(chGMT(sign_time[ks]).slice(0, 4), chGMT(sign_time[ks]).slice(5, 7) - 1, chGMT(sign_time[ks]).slice(8, 10), chGMT(sign_time[ks]).slice(11, 13), chGMT(sign_time[ks]).slice(14, 16), chGMT(sign_time[ks]).slice(17, 19)),
                                    y: Number(sign_arr[ks].O2Saturation)
                                }
                                k70++;
                            }
                        }

                        $(function () {
                            function syncExtremes(e) {
                                var thisChart = this.chart;
                                if (e.trigger !== 'syncExtremes') {
                                    Highcharts.each(Highcharts.charts, function (chart) {
                                        if (chart !== thisChart) {
                                            if (chart.xAxis[0].setExtremes) {
                                                chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {trigger: 'syncExtremes'});
                                            }
                                        }
                                    });
                                }
                            }

                            Highcharts.chart('timechart3', {
                                chart: {
                                    type: 'spline',
                                    marginLeft: 150,
                                    zoomType: 'xy',
                                    panning: true,
                                    panKey: 'ctrl'
                                },
                                title: {
                                    text: 'SURGERY VITAL SIGNS-HADMID: ' + Term30 + ' OPERID: ' + Term31
                                },
                                subtitle: {
                                    text: 'Drag to select the zoom area; Press ctrl to pan the chart left or right; Click on the legend to hide or resume display.'
                                },
                                xAxis: {
                                    type: 'datetime',
                                    events: {
                                        setExtremes: syncExtremes
                                    },
                                    title: {
                                        text: 'Time In Hospital'
                                    }
                                },
                                yAxis: [{
                                    title: {
                                        text: 'Measurement, Absolute Value'
                                    },
                                    tickInterval: 1,
                                    min: 0
                                }],
                                tooltip: {
                                    headerFormat: '<b>{series.name}:{point.y}</b><br>',
                                    pointFormat: '{point.x:%A,%b.%e,%Y,%H:%M:%S} ',
                                    positioner: function () {
                                        return {x: this.chart.chartWidth - this.label.width - 1, y: 0};
                                    },
                                    crosshairs: [{
                                        width: 1,
                                        color: "#006cee",
                                        dashStyle: 'longdashdot'

                                    }, {
                                        width: 1,
                                        color: "#006cee",
                                        dashStyle: 'longdashdot'
                                    }]
                                },
                                legend: {
                                    layout: 'vertical',
                                    align: 'right',
                                    verticalAlign: 'middle'
                                },
                                plotOptions: {
                                    series: {
                                        label: {
                                            connectorAllowed: false
                                        }
                                    },
                                    spline: {
                                        marker: {
                                            enabled: true
                                        }
                                    }
                                },
                                colors: ['#ae0000', '#ff85e5', '#036', '#ffc300', '#3ecc8c', '#6CF', '#696969'],
                                series: [{
                                    name: 'Heart Rate',
                                    data: sign_arr1
                                },
                                    {
                                        name: 'Pulse',
                                        data: sign_arr2
                                    },
                                    {
                                        name: 'Systolic Pressure',
                                        data: sign_arr3
                                    },
                                    {
                                        name: 'Diastolic Pressure',
                                        data: sign_arr4
                                    },
                                    {
                                        name: 'Central Venous Pressure',
                                        data: sign_arr5
                                    },
                                    {
                                        name: 'Respiratory Rate',
                                        data: sign_arr6
                                    },
                                    {
                                        name: 'O2 Saturation',
                                        data: sign_arr7
                                    }
                                ]
                            });
                        });
                    }
                }
            })
        }

        Date.prototype.format = function (format) {
            var o = {
                "M+": this.getMonth() + 1, //month
                "d+": this.getDate(), //day
                "h+": this.getHours(), //hour
                "m+": this.getMinutes(), //minute
                "s+": this.getSeconds(), //second
                "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
                "S": this.getMilliseconds() //millisecond
            }
            if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            return format;
        }

        function chGMT(gmtDate) {
            return gmtDate;
        }

        window.onload = function () {
            search_graph_surgeryvital();
        }
